<template>
  <view class="wrap">
    <view class="container" :style="{'margin': '0 '+mpWxPosition.bothSideMargin+'px'}">
    </view>
    <view class="cover" v-if="false">
      <image :src="productInfo.product.cover" mode="withFit" class="cover-image"></image>
    </view>
    <view class="title-share">
      <view class="title" :style="{'margin': '10px '+mpWxPosition.bothSideMargin+'px'}">
        {{productInfo.product.name}}
      </view>
      <button open-type="share" class="share">
        <uv-icon name="share" color="#2979ff" size="22"></uv-icon>
      </button>
    </view>
    <uv-line></uv-line>
    <view class="content">
      <uv-parse class="detail" :content="productInfo.material"></uv-parse>
    </view>
  </view>
</template>

<script>
import { useMpWxPosition } from '@/stores/mpWxPosition'
import { useMpUser } from '@/stores/mpUser'
let _this;
export default {
  name: "Product_Detail",
  beforeCreate() {
    _this = this;
  },
  data() {
    return {
      mpWxPosition: useMpWxPosition().getMpWxPosition,
      productInfo: {
        product: {
          cate_root: 0,
          cover: "",
          created_at: 0,
          created_by_admin: "1",
          deleted_at: 0,
          id: 0,
          name: "",
          product_sort: 1,
          sheff_off_at: null,
          sheff_on_at: null,
          status: 1,
          updated_at: 0,
          updated_by_admin: 0
        },
        material: ''
      }
    }
  },
  onLoad(options) {
    _this.$api.mpLogin().then(() => {
      _this.getProductDetail(options.id)
    })
  },
  onShareAppMessage() {
    return _this.getShareObj()
  },
  onShareTimeline() {
    return _this.getShareObj()
  },
  methods: {
    getProductDetail(id) {
      _this.$api.post('/product/default/detail', { id: id }).then(res => {
        _this.productInfo.product = res.data.product;
        _this.productInfo.material = res.data.material;
      })
    },
    getShareObj() {
      const title = '分享产品';
      const shareParams = {
        id: _this.productInfo.product.id,
        mpUserId: useMpUser().getMpUser.id
      }
      let query = _this.$tool.objectToQueryString(shareParams);
      const path = `/pages/product/detail?${query}`;
      const imageUrl = _this.productInfo.product.cover || '';
      return {
        title: title,
        path: path,
        imageUrl: imageUrl
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.wrap {
  .container {}
  .cover {
    image {
      width: 750rpx;
      height: 750rpx;
    }
  }
  .title-share {
    display: flex;
    justify-content: space-between;
    .title {
      //border: 1px solid #eee;
    }
    button.share {
      //display: block;
      padding: 10px 0;
      background: transparent;
      margin-right: 10px;
      &::after {
        border: none;
      }
    }
  }
  .content {
    margin-top: 10px;
    image {
      width: 100%;
      height: auto;
    }
  }
}
</style>
